<template>
  <div class="avatar-demo">
    <h2>头像组件示例</h2>

    <section class="demo-block">
      <h3>基础用法</h3>
      <volvo-avatar src="../assets/icon/icon-192x192.png" />
    </section>

    <section class="demo-block">
      <h3>不同尺寸</h3>
      <volvo-avatar size="xlarge" src="../assets/icon/icon-192x192.png" />
      <volvo-avatar size="large" src="../assets/icon/icon-192x192.png" />
      <volvo-avatar size="medium" src="../assets/icon/icon-192x192.png" />
      <volvo-avatar size="small" src="../assets/icon/icon-192x192.png" />
      <volvo-avatar size="mini" src="../assets/icon/icon-192x192.png" />
    </section>

    <section class="demo-block">
      <h3>不同形状</h3>
      <volvo-avatar shape="circle" src="../assets/icon/icon-192x192.png" />
      <volvo-avatar shape="square" src="../assets/icon/icon-192x192.png" />
    </section>

    <section class="demo-block">
      <h3>文字头像</h3>
      <volvo-avatar text="V" />
      <volvo-avatar text="沃" />
      <volvo-avatar text="A" shape="square" />
    </section>

    <section class="demo-block">
      <h3>自定义背景色</h3>
      <volvo-avatar text="V" bgColor="#ff0000" />
      <volvo-avatar text="沃" bgColor="#4CAF50" />
      <volvo-avatar text="A" bgColor="#FFA500" />
    </section>

    <section class="demo-block">
      <h3>图片加载失败</h3>
      <volvo-avatar src="error.jpg" text="V" />
    </section>
  </div>
</template>

<script setup>
import VolvoAvatar from '../components/avatar/index.vue'
</script>

<style lang="scss" scoped>
.avatar-demo {
  padding: 20px;

  h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }

  h3 {
    margin: 16px 0;
    font-size: 18px;
  }

  .demo-block {
    margin-bottom: 32px;

    .volvo-avatar {
      margin-right: 16px;
      margin-bottom: 16px;
    }
  }
}
</style>
